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Visual Programming and Reusable Parts: 
The Marquee Part 


C onstructing reusable parts is a difficult task. You have 
to know what tools are available to use, and you must 
be familiar with existing reusable parts. Most impor¬ 
tantly, you have to know the process to construct them. 
The task is not impossible, and with experience it 
becomes easier. 

In this column, we will help you gain experience creat¬ 
ing reusable parts by discussing the creation of a marquee 
part. A marquee is a relatively simple part designed to 
reflect the operation of a light board appearing in the 
front of many sport facilities. The marquee scrolls text 
that is too large to display statically. Our implementation 
scrolls right-to-left by repeatedly removing the first char¬ 
acter of its message, and tacking it on to the end. 

CONSTRUCTING A MARQUEE 

11 is si mple to construct a wi ndow contai ni ng a Scrol I ing Iabel. 
We constructed one cal led a MarqueeDemonstrati on Window, 
using both a label part and a timer part. Two connections 
between the wi ndow and the ti mer ensured that the ti mer 
started when the window opened and stopped when the 
window closed. Another connection updated the con¬ 
tents of the label when the timer ticked. Figure 1 shows 
the appearance of the M arqueeDemonstrati on Wi ndow i n 
the Composition Editor. 

IBM's VisualAge for Smalltalk Version 3.0 provides a 
timer partin the Multi media Package. Version 2.0 includes 
the same part with an exercise. The timer has several fea¬ 
tures that can be set using the Settings Editor, shown in 
Figure 2. These features include the timer's period in mil¬ 
liseconds, and whether or not thetimer should fire repeat¬ 
edly. In our example, the timer is set to repeatedly fire 
every 100 mi 11 i secon ds. 

To support the scrolling mechanism in the Marquee 
DemonstrationWindow, we made the following connec¬ 
tions in the Composition Editor. First, we connected the 
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window part'sopenedWidget eventto the timer's start action, 
and then connected thewindow'sclosedWidget eventto the 
timer's stop action. With these connections, thetimer fires 
one hundred milliseconds after the window opens, and 
continues to fire every one hundred milliseconds until the 
window closes. Finally, we connected the timer's timer Fired 
event to the fol lowi ng scri pt titled scrol I: 

scroll 

| oldText newText | 

oldText: = (self subpartNamed: 'Label 1') labelstring. 
newText : = (oldText copyFrom: 2 to: oldText size), 
(String with: oldText first). 

(self subpartNamed: 'Label 1') labelstring: newText 

The script retrieves the label's current string, con¬ 
structs a new one containing the current string's first 
character removed and appended to the end of it, and 
then updates the label with the new string. As this script 
executes ten times a second, the label's string cycles con¬ 
tinuously. 

We made further embellishments to permit the user 
to dynamically change the label's string. We added a 
push button and an entry field to our window so that the 
user could click the push button to set the label's string 
to the entry field's current string. To support this func¬ 
tionality, we connected the push button's clicked eventto 
the label's labelstring attribute and connected the 
clicked/labelString connection's value attribute to the 
entry field's object attribute. 

WIDGET LAYOUT 

Part of constructing a complete application includes 
specifying how parts react when a window is resized. 
Figure 3 shows the MarqueeDemonstrationWindow in 
action. When the window is resized, the entry field clings 
to the top of the window and the scrolling label clings to 
the bottom. The left and right sides of each part remain 
constant distances from the sides of the window. 

Specifying a part's layout attachments in VisualAge is 
simple. In the a part's Settings Editor there is a page 
labeled Layout. On this page, you can specify layout 
information for the part's top, bottom, left, and right 
sides. For the input field part, we specified that its top 
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Figure l.The MarqueeDemonstrationWindow as it appears in the 
Composition Editor. 


edge is attached to the "Parent top edge," and that there 
is a four-pixel separation between them (the top edge of 
the input field part is a constant four 
pixels away from the top edge of its 


strates one possibility in VisualAge: a scrolling mar¬ 
quee. However, anyone wanting the same marquee fea¬ 
ture must drop the appropriated parts and make the 
correct connections. Since the marquee feature has 
potential for reuse, we built a reusable Marquee part 
for others to use, in which its construction was trans¬ 
parent to them. 

The construction of the Marquee part began by cre¬ 
ating a new visual part named Marquee. In the 
Composition Editor, we removed the default window 
and copied to it the label and timer parts from the 
MarqueeDemonstrationWindow, as shown in Figure 4. 
The script was also copied to the new part. 

Next, we restored the timer's timerFired: event connec¬ 
tion to the script named scroll. However, we had to 
change the way the timer started and stopped—there 
was no longer a window to trigger openedWidget and 
closedWidget events. These events still exist because all 
visual parts give notice, via the triggering of events, that 
they have opened. The M arquee part is no different. The 

context menu on thefree-form sur¬ 
face area (the white space in the 
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parent). The parent of any part is the UUr impl&m&ntdtlOn SCrOllS Composition Editor) contains the 
canvas (typically a window) where 
the part is situated. If the part is 
positioned on a form, then the form rGITlOVi HQ thG first ChdrdCtGT event from the Marquee part to the 

. , - . timer's start action, and connected 

of its message, and tacking 
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is its parent. Similar attachments 
were specified for the input field's 
left and right edges (connecting 
them to the parent left and right 
edges, respectively). 

The input field part's bottom edge used a different 
attachment. Specifying "No" attachmentfor any part indi¬ 
cates to VisualAge that the part should use whatever 
amount of space is appropriate. In the case of an input 
field part, the appropriate amount of space depends on 
its current font—the bottom edge will be far enough away 
from the top edge to accommodate the font, plus an 
appropriate amount of gutter space. Be aware that the 
"No attachment" attachment type makes sense only if the 
opposite edge is attached. For example, it is not possible 
to have both the top and the bottom unattached. 

The "Target attachment" type is also 
very powerful. It permits you to constrain 
one part's edge to another part's edge. In 
Figure 3, the push button's top edge is 
attached to the input field's bottom edge. 

By using all of these arrangements, it is 
possible to design a window in which the 
parts always resize correctly, because they 
are dependent on the positioning of other 
parts, the current font, and the monitor 
resolution—fonts sometimes have differ¬ 
ent metrics in different monitor resolu¬ 
tions. 

MAKING A REUSABLE PART 


it on to the end. 


the closedWidget event to the timer's 
stop action. 

This new Marquee part was 
now ready to use in the 
MarqueeDemonstrationWindow. First, we removed the 
old label and the timer parts from the window. Since the 
new Marquee part was not accessible in the palette, we 
added it using the Composition Editor's Options menu 
entry "Add" part. We placed the Marquee part in the win¬ 
dow, opened the window, and it worked! 

PRIMARY PARTS 

Visual parts do not necessarily contain a window. 
However, all parts created with the Composition Editor 
have a Primary Part. The primary part is the first thing the 
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TheMarqueeDemonstrati on Window demon- Figure 2.The Settings Editor for a Timer part. 
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Figure 3.The MarqueeDemonstrationWindow in action. 

user sees, which is usually a window. Sometimes the pri¬ 
mary part can be another visual part. In our Marquee part, 
the primary part is the label. There is no special reason to 
have a window part as default primary part, short of win¬ 
dows being useful. 

In the Composition Editor all visual parts that are not 
the primary part have an entry "Become" primary part in 
their context menu. We used this menu item to change 
the label to the new primary part. 

In the original MarqueeDemonstrationWindow, the 
user could change the contents of 
the marquee. That ability is still 


Marquee part. The benefit is that users of the Marquee 
part no longer know about the Marquee's internal repre¬ 
sentation, and, if at a later time we decide to change the 
implementation, we only have to ensure that the message 
feature persists. 

In the current version ofVisualAge, features of the pri¬ 
mary part cannot be promoted. We assume that the 
designers built this into the product because all those 
features are made available anyway. Apparently, the 
designers did not have our reasoning. One workaround 
was to make another part become the primary part, pro¬ 
mote the required feature of the label, and then change 
the pri mary part back to the label. 

COMPOSITION EDITOR VARIABLES 

Another workaround requires the use of variables. First, 
create a variable and connect its self attribute to the 
label's labelstring attribute with an attribute-to-attribute 
connection. With this connection in place, the contents 
of the labelstring attribute will always be reflected in the 

variable, and vice-versa. Rather 
than "fudging" the feature promo- 


available in our new Marquee part. The HOtiOil Of 3 priITIdrypdTt tion as before, you can now directly 
Every part created using the 
Composition Editor has the same 


public features as those of its prima¬ 
ry part. Therefore, the Marquee part 
has the same features as the label, 
including the labelstring attribute. In 
fact, if you open the settings for the 
Marquee part, you will see entries for most of the label's 
attributes, including labelstring. 

As with the previous version of the 
MarqueeDemonstrationWindow, we connected the push 
button's clicked event to the Marquee part's labelstring 
attribute and connected the value attribute of the result¬ 
ing connection to the object attri bute of the text field. 

PROMOTE PART FEATURE 


, , promote the variable's self as the 

permits OlietO hdve more feature message. The self attributeof 

than onewindowin a sinqle avariableactua|| y referstothecon - 

tents of the variable, in this case a 


Composi tion Edi tor. 


string. With the connection between 
the variable and the label, promot¬ 
ing the variable's self attribute has 
the same effect as promoting the label's labelstring 
attribute. 

VisualAge makes these tasks easy. The pop-up menu 
for the label part contains an entry "Tear-Off Attribute." 
When this entry is selected for a part such as a label, 
VisualAge prompts you to select an attribute from the 
label's attribute list. Based on your selection, VisualAge 
creates an appropriate variable and an attribute-to- 


The connection between the push button and the 
Marquee part's labelstring attri bute identifies several prob¬ 
lems with the Marquee part. First, should a Marquee part 
actually have a labelstring attri bute? We tend to think of a 
marquee as having a message that is displayed. Second, 
the name labelstring implies something about the inter¬ 
nals of the Marquee part that should be irrelevant, espe¬ 
cially if those internals may change at some point in the 
future. 

Two improvements are required. We need a new name 
for the labelstring attribute (perhaps message). Also, the 
labelstring attribute, along with the other inappropriate 
features, should be removed from the Marquee's public 
interface. The first problem is easy to correct, the second 
i s n ot. We w i 11 n ow ad d ress th e f i rst p ro b I em an d d efer the 
second problem for a future discussion. 

VisualAge can promote a part's features to features of 
its parent part. In our case, we wanted the label's 
labelstring attribute promoted as a message attribute of the 
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Figure 4.The Marquee part in the Composition Editor. 
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Figure 5.The Promote Part Features window. 


attribute connection between the label's selected 
attribute and the variable's self attribute. 

To promote the variable's self attribute as the Marquee's 
message attribute, position the mouse over the newly created 
variable in the Marquee part, pop up the menu and then 
select "Promote Part Features...." In the promote window, 
shown in Figure 5, select the self attribute and provide mes¬ 
sage asthefeaturename. Finally, click the Promote button to 
add thefeature to the public interface of the M arquee part. 

After saving the Marquee part, its feature list will include 
the promoted feature message. Further, the Marquee part's 


Settings Editor automatically includes the promoted mes¬ 
sage feature for you to initialize. 

SUMMARY 

We've discussed the construction of one reusable part: the 
M arquee part. Although its use is limited, what is interest¬ 
ing about it is the process and the VisualAge's features 
used for its construction. The notion of a primary part 
permits one to have more than one window in a single 
Composition Editor. It also makes it possible to have a pri¬ 
mary part that is not a window (perhaps a push button 
that opens a window might find some application as a 
reusable part). Promoting part features is a wonderful 
mechanism for selectively granting access to the i nternals 
of objects. The Composition Editor's variables are useful 
for passing values from one part to another. They also 
permit access to parts of parts. 

In future columns we intend to discuss more about 
each of these mechanisms, and many others, in the con¬ 
texts of other interesting reusable parts we have created. 

THE CODE 

The code presented in thiscolumn and in future columns 
is available at http://www.objectpeople.com. The code is 
presented as an IBM Smalltalk library file, containingtwo 
versions of the software. Version one provides the single¬ 
class implementation of the Marquee; version two pre¬ 
sents the reusableform with an example. E3 
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